import React from 'react'
import { Statistic, Row, Col ,Table, Tag, Space,Button} from 'antd';

function amount() {
    const columns = [
        {
          title: '试卷名称',
          dataIndex: 'name',
          key: 'name',
          render: text => <Button>{text}</Button>,
        },
        {
          title: '考试班级',
          dataIndex: 'class',
          key: 'class',
        },
        {
          title: '试卷作者',
          dataIndex: 'examauthor',
          key: 'examauthor',
        },
        {
          title: '创建日期',
          key: 'dateCreated',
          dataIndex: 'dateCreated',
          render: (text, record) => (
            <Space size="middle">
            <Tag  color="blue">{text}</Tag> 
            </Space>
          ),
              
          
          
        },
        {
            title: '模板',
            dataIndex: 'template',
            key: 'template',
          },
        {
          title: '操作',
          key: 'action',
          render: (text, record) => (
            <Space size="middle">
              <Button type="primary">编辑</Button>
              <Button type="danger">删除</Button>
            </Space>
          ),
        },
      ];
      const data = [
        {
          key: '1',
          name: 'Java编程基础',
          class:'网工17-1',
          examauthor:'宋文杰',
          dateCreated:'2020-01-20',
          template:''
        },
        {
            key: '2',
            name: 'Pathon编程基础',
            class:'网工18-2',
            examauthor:'肖骏',
            dateCreated:'2020-01-30',
            template:''
          },
          {
            key: '3',
            name: 'Go语言基础',
            class:'网工17-1',
            examauthor:'刘乾港',
            dateCreated:'2020-01-20',
            template:''
          },
          {
            key: '4',
            name: 'Web前端教程',
            class:'网工17-1',
            examauthor:'宋文杰',
            dateCreated:'2020-01-22',
            template:''
          },
      ];
      
    return (
        <>
            <div >
            <Row gutter={16}>
                <Col span={6}>
                    <Statistic title="试卷总数量" value={999} /><Button>查看</Button>
                    
                </Col>
                <Col span={6}>
                    <Statistic title="待考试试卷数量" value={336} suffix='/ 999' /><Button>查看</Button>      
                </Col>
                <Col span={6}>
                    <Statistic title="考试中试卷数量" value={332} suffix='/ 999' /><Button>查看</Button>
                </Col>
                <Col span={6}>
                    <Statistic title="考试结束试卷数量" value={331}  suffix='/ 999' /><Button>查看</Button>       
                </Col>
            </Row>
            </div>
        
        
            <div>
            <Table 
            style={{marginTop:'100px'}}
            columns={columns} 
            dataSource={data} 
            pagination={{position: ['bottomCenter'],}}/>
            </div>
        </>
    )
}

export default amount


